<template>
    <div class="box-warp">
        <div class="mediaLeft">
            <div v-for="(result,index) in result" :key="index" class="mediaLeftContent">
                <div>
                    <div class="colTwoContent" :class="'item'+index">
                        <div class="colTwoTop">
                            <div class="personL">
                                <img :src="result.logo" alt="" width="90px" height="90px" @click="$router.push({path:'/view2/shortVideoDetail',query:{id:result.id}})">
                            </div>
                            <div class="personR">
                                <p>
                                    <span @click="$router.push({path:'/view2/shortVideoDetail',query:{id:result.id}})">{{b64DecodeUnicode(result.mediaName)}}</span><img src="../../../assets/img/2-indexMedia/media/3.png"></p>
                                <p>{{result.about}}</p>
                                <img src="../../../assets/img/2-indexMedia/media/2.png">
                                <span style="font-size:13px;margin-top:2px">{{result.lable1}}</span>
                                <img src="../../../assets/img/2-indexMedia/media/2.png">
                                <span style="font-size:13px;margin-top:2px">{{result.lable2}}</span>
                            </div>
                        </div>
                        <div class="id">
                            <div>
                                <p class="strong">{{numLen(result.fansTotal+"")}}</p>
                                <p class="">粉丝数</p>
                            </div>
                            <div class="strong">
                                <p>{{numLen(result.likenumInt+"")}}</p>
                                <p>收藏/点赞</p>
                            </div>
                            <div class="strong">
                                <p>{{numLen(result.noteTheNumber+"")}}</p>
                                <p>笔记数量</p>
                            </div>
                        </div>
                    </div>
                    <button :class="{btnRed:liIndex == index,btnDefault:liIndex!=index}" @mouseover="changeColor(index)" @click="$router.push({path:'/view2/shortVideoDetail',query:{id:result.id}})">点击获取报价</button>
                </div>
            </div>
        </div>
        <div class="box-shadow"></div>
        <div class="mediaRight">
            <div class="shortVideo">
                <div class="shortVideoContent">
                    <div style="width:70%;float: left;">
                        <p>人气排行榜<img src="../../../assets/img/2-indexMedia/media/5.png"></p>
                        <button>小红书</button>
                    </div>
                    <div style="width:30%;float: right">
                        <img src="../../../assets/img/2-indexMedia/media/7.png" style="margin-top:27px;">
                    </div>
                </div>
                <ul class="listNav">
                    <li>小红书号
                        <span class="line"></span>
                    </li>
                    <li>粉丝数</li>
                </ul>
                <ul class="detailList">
                    <li v-for="(resultList,index) in resultList" :key="index" :class="{lihasborder:index==liborderindex,linoborder:index!=liborderindex}" @mouseover="hasborder(index)" @mouseout="hasnoborder(index)" @click="routeDetail(index)">
                        <span><img :src="detailList[index]" alt=""></span>
                        <span>{{b64DecodeUnicode(resultList.media_name)}}</span>
                        <span>{{numLen(resultList.fans_total+"")}}</span>
                    </li>
                </ul>
                <button class="btnList" @click="tiaozhuan">查看更多&nbsp;&nbsp;></button>
            </div>
        </div>
    </div>
</template>
<script>
const imgOne = require('../../../assets/img/2-indexMedia/child_05.png')
const imgTwo = require('../../../assets/img/2-indexMedia/media/3.png')
const imgThree = require('../../../assets/img/2-indexMedia/media/1.png')
const imgFour = require('../../../assets/img/2-indexMedia/media/2.png')
const img12 = require('../../../assets/img/2-indexMedia/media/12.png')
const img13 = require('../../../assets/img/2-indexMedia/media/13.png')
const img14 = require('../../../assets/img/2-indexMedia/media/14.png')
const img15 = require('../../../assets/img/2-indexMedia/media/15.png')
const img16 = require('../../../assets/img/2-indexMedia/media/16.png')
const img17 = require('../../../assets/img/2-indexMedia/media/17.png')
const img18 = require('../../../assets/img/2-indexMedia/media/18.png')
const img19 = require('../../../assets/img/2-indexMedia/media/19.png')
const img20 = require('../../../assets/img/2-indexMedia/media/20.png')
const img21 = require('../../../assets/img/2-indexMedia/media/21.png')
import moduleName from '../../../assets/css/mediaCommon.css'
export default {
  data() {
    return {
      liIndex: 0,
      detailList: [
        img12,
        img13,
        img14,
        img15,
        img16,
        img17,
        img18,
        img19,
        img20,
        img21
      ],
      result: '',
      args: {
        page: 1,
        limit: 4,
        type: '小红书号',
        order: 'fans_total',
        appType: '',
        homeShowFlag: 1
      },
      resultList: '',
      liborderindex: 0
    }
  },
  methods: {
    changeColor(index) {
      this.liIndex = index
    },
    tiaozhuan() {
      this.$router.push({
        path: '/view2/hotMedia',
        query: { type: this.args.type }
      })
    },
    routeDetail(index) {
      this.$router.push({
        path: '/view2/shortVideoDetail',
        query: { id: this.resultList[index].id }
      })
    },
    hasborder(index) {
      this.liborderindex = index
    },
    hasnoborder(index) {
      this.liborderindex = 0
    }
  },
  //   小红书接口
  mounted() {
    this.$ajax
      .post(this.Ipurl + 'popularMedia/selectPage', this.args)
      .then(res => {
        this.result = res.data.dataInfo.records
      })
    this.$ajax
      .post(this.Ipurl + 'popularMedia/getRankingByType' + '?type=小红书号')
      .then(res => {
        this.resultList = res.data.dataInfo
      })
  }
}
</script>
<style scoped>
.box-warp {
  position: relative;
}
.box-shadow {
  width: 20px;
  height: 596px;
  position: absolute;
  top: -38px;
   -moz-box-shadow: 3px 0px 6px #eee;
  -webkit-box-shadow: 3px 0px 6px #eee;
  box-shadow: 3px 0px 6px #eee;
  left: 74%;
  z-index: -1;
}
.detailList li {
  height: 39px;
  cursor: pointer;
}
ul > li.lihasborder {
  background: #fff;
}
ul > li.linoborder {
  background: #f8f9fd;
}
.item0,
.item2 {
  width: 90%;
  padding-right: 10px;
  border-right: 1px solid #eee;
}
.listNav > li:nth-child(1) {
  position: relative;
}
.line {
  width: 1px;
  height: 15px;
  background: #fff;
  position: absolute;
  right: 0px;
  top: 7.5px;
}
</style>


